<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <!-- 引入本地的 Element Plus 样式表 -->
    <link rel="stylesheet" href="./assets/element.css" />
    <!-- 引入 Vue 3 版本 -->
    <script src="./assets/vue.global.js"></script>
    <!-- 引入 Element Plus 组件库 -->
    <script src="./assets/element.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 用户信息录入表单 -->
        <h2 class="mgb24">信息录入</h2>
        <!-- 使用 Element Plus 的表单组件 -->
        <el-form :inline="true" :model="userForm" class="demo-form-inline">
            <!-- 用户姓名输入框 -->
            <el-form-item label="Name">
                <el-input v-model="userForm.name" placeholder="" clearable />
            </el-form-item>
            <!-- 用户年龄输入框 -->
            <el-form-item label="Age">
                <el-input v-model="userForm.age" placeholder="" clearable />
            </el-form-item>
            <!-- 用户性别选择框 -->
            <el-form-item label="Gender">
                <el-radio-group v-model="userForm.gender">
                    <el-radio value="Female">Female</el-radio>
                    <el-radio value="Male">Male</el-radio>
                    <el-radio value="Custom">Custom</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 提交按钮，分别用于添加和更新用户 -->
            <el-form-item>
                <el-button type="primary" @click="handleUserAdd">Add</el-button>
                <el-button type="primary" @click="handleUserUpdate">Update</el-button>
            </el-form-item>
        </el-form>

        <!-- 用户信息展示 -->
        <h2 class="mgb24">信息展示</h2>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <!-- 查询条件输入框 -->
            <el-form-item label="Name">
                <el-input v-model="searchForm.name" />
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
                <el-button type="primary" @click="handleSearch">Search</el-button>
            </el-form-item>
            <!-- 用户数据表格展示 -->
            <el-table :data="tableData" style="width: 100%" class="mgb24">
                <el-table-column prop="name" label="Name"></el-table-column>
                <el-table-column prop="age" label="Age"></el-table-column>
                <el-table-column prop="gender" label="Gender"></el-table-column>
                <!-- 操作列：编辑和删除 -->
                <el-table-column fixed="right" label="Operations" min-width="120">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">Edit</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-pagination class="pagination" v-model:current-page="current" background layout="prev, pager, next"
                :total="total" @current-change="handleCurrentChange" />
        </el-form>
    </div>
</body>
<script>
    // Vue 3 应用实例定义
    const App = {
        data() {
            return {
                userForm: { // 用户输入表单的初始值
                    name: '',
                    age: '',
                    gender: '',
                    id: ''
                },
                searchForm: { // 查询表单的初始值
                    name: ''
                },
                tableData: [], // 表格数据
                current: 1, // 当前分页页码
                total: 0 // 数据总数
            }
        },
        async mounted() {
            // 在组件挂载时调用 `fetchList` 来加载数据
            this.fetchList()
        },
        methods: {
            // 获取用户列表数据
            async fetchList() {
                const { name } = this.searchForm
                const response = await fetch(`http://localhost:3000/users?name=${name}&current=${this.current}`)
                const data = await response.json()
                this.tableData = data.users // 表格数据
                this.total = data.total // 设置数据总数
            },
            // 添加新用户
            async handleUserAdd() {
                await fetch('http://localhost:3000/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    body: JSON.stringify(this.userForm)
                })
                this.fetchList()
            },
            // 更新现有用户信息
            async handleUserUpdate() {
                await fetch(`http://localhost:3000/users/${this.userForm.id}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    body: JSON.stringify(this.userForm)
                })
                this.fetchList()
            },
            // 处理用户查询
            handleSearch() {
                this.fetchList()
            },
            // 编辑用户信息，将选中行的数据填充到表单中
            async handleEdit(row) {
                this.userForm = { ...row }
            },
            // 删除用户信息
            async handleDelete(row) {
                await fetch(`http://localhost:3000/users/${row.id}`, {
                    method: 'DELETE',
                })
                this.fetchList()
            },
            // 处理分页切换
            handleCurrentChange(val) {
                this.current = val
                this.fetchList()
            }
        }
    }
    // 创建并挂载 Vue 应用实例
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
</script>

</html>